<template>
	<view>
		<u-upload
			ref="upload"
			:action="action" 
			:max-size="5 * 1024 * 1024" 
			max-count="1" 
			:custom-btn="true"
			:multiple="false"
			:show-progress="false"
			:deletable="false"
			:form-data="formData"
			:before-upload="beforeUpload"
			height="0"
			width="0"
			@on-success="OnSuccess">
			
			<u-avatar slot="addBtn" :src="vuex_user.avatar_url" size="140"></u-avatar>
			
		</u-upload>
	</view>
</template>

<script>
	let _this = {}
	export default {
		name: "oss-upload",
		data() {
			return {
				action: 'http://www.example.com/upload',
				formData:{},
				upFileName:'', // 文件名
			};
		},
		// 组件创建的时候触发
		created() {
			_this = this
		},
		methods: {
			// 上传前的钩子
			// 注意：在小程序中 this 可能会丢失 可以捕获来获取 
			// 1. let _this
			// 2.在组件创建的时候 _this = this
			async beforeUpload(index, list) {
				// console.log(list);
				// 获取文件名
				const {file} = list[0]
				// 兼容H5 条件编译
				// #ifdef H5
				const fileName = file.name
				// #endif
				// 除了H5 都兼容 条件编译
				// #ifndef H5
				const fileName = file.path
				// #endif
				
				// 请求API，获取oss token 
				const ossToken = await _this.$u.api.ossToken()
				
				// 设置上传域名
				_this.action = ossToken.host
				
				// 处理唯一的文件名
				const suffix = fileName.slice(fileName.lastIndexOf('.'))
				// 随机生成唯一文件名
				const upFileName = _this.$u.guid(20) + suffix
				_this.upFileName = upFileName
				// 设置上传的额外参数
				_this.formData = {
					'key':_this.upFileName, // 上传后的文件名
					'policy':ossToken.policy,
					'OSSAccessKeyId':ossToken.accessid,
					'success_action_status':'200', //让服务端返回200,不然，默认会返回204
					'signature':ossToken.signature,
				}
				// console.log(ossToken);
				return true;
			},
			// 上传成功触发的函数
			async OnSuccess(){
				// 移除预览区的图片
				this.$refs.upload.remove(0)
				// 请求API更新头像
				const res = await this.$u.api.userAvatar({avatar:this.upFileName})
				// 更新缓存的用户信息
				this.$u.utils.updateUser()
				// 提示信息
				this.$u.toast('修改成功！！')
			}
		}
	}
</script>

<style>

</style>
